// 封装ajax函数
// 兼容GET和POST请求
let ajaxFn = function ({
  baseUrl,
  url,
  method,
  data = {},
  headers = {},
  callBack,
}) {
  // baseUrl 基础路径 (http://127.0.0.1:3000)
  // url 接口地址   (/api/xxx)
  // method 请求方式    (GET、POST、PUT)
  // data 请求参数 (get和post统一使用json格式)
  // headers 请求头
  // callBack 回调函数 (接收数据)

  let xhr = new XMLHttpRequest();

  // 判断是否为GET请求，参数是需要拼接在url上
  let query = '?';
  if (Object.keys(data).length) {
    for (const key in data) {
      query += `${key}=${data[key]}&`;
    }
  }

  function setHeaders() {
    // 设置请求头
    if (Object.keys(headers).length) {
      for (const key in headers) {
        const element = headers[key];
        xhr.setRequestHeader(key, element);
      }
    }
  }

  if (method.toUpperCase() === 'GET') {
    // type = 0
    xhr.open(method, baseUrl + url + query.slice(0, -1));
    setHeaders();
    xhr.send();
  } else {
    xhr.open(method, baseUrl + url);
    // 请求体要求发送一个json字符串
    setHeaders();
    xhr.send(JSON.stringify(data));
  }

  // 监听xhr对象请求的状态
  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callBack(JSON.parse(xhr.response));
        return callBack;
      } else {
        // 可能出现的报错，一般后端都会响应报错信息，也需要返回出去到回调函数
        callBack(JSON.parse(xhr.response));
        return callBack;
      }
    }
  });
};

export default ajaxFn;
